小春网络科技21天前发布关注私信 共计1041字,阅读大约4分钟。 效果图 首先需要准备一个循环的动画图片(GIF),没有的我提供一个早稻姬的 找到header.php文件,再body后面加入以下代码 <div class="loader" style="flex-direction: column;color: #f77b90;"><img src="https://cos.uocin.com/wp-content/uploads/2023/11/20231104073127417.gif" alt="loader"><br>Loading···</div> 然后添加css和js CSS .loader{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #FFF; z-index: 99; opacity: 1; /* 初始透明度为1(完全不透明) */ transition: opacity 0.5s, z-index 0.5s; /* 添加过渡效果,时长为1秒 */ } .loader.hidden { opacity: 0; /* 当添加.hidden类时,透明度变为0 */ z-index: 0; /* 同时将z-index设置为0 */ } .loader>img { height: 96px;/*根据自身需求修改图片大小*/ } JS 此处内容已隐藏,请评论后刷新页面查看. 因为加载好就隐藏很突兀,所以搞了延迟0.5秒隐藏,具体效果类似淡入淡出 温馨提示:本文最后更新于2024-04-11 08:53:54,某些文章具有时效性,若有错误或已失效,请在下方留言或联系小春。------本页内容已结束,喜欢请分享------ 网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。 分享是一种美德,当你分享时请你附带上本文链接。 © 版权声明 重要提示 本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关!请在下载24小时内删除!如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。 本站非常重视版权问题,资源大多来自网络 如有侵犯你的权益请联系管理员 E-mail:1093578731@qq.com,我们会第一时间进行审核删除。 如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR。 THE END子比美化实用代码技术文档教程之家# 子比# 美化# WordPress 喜欢就支持一下吧点赞8收藏 分享QQ空间微博QQ好友海报分享复制链接